<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-notification"></i> 红包记录
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box" style="margin-bottom:50px">
                <el-col :span="12">
                    <el-input
                            v-model="query.mobile"
                            placeholder="用户手机号"
                            class="handle-input mr10"
                            style="width:120px;"
                    ></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                </el-col>
            </div>
            <el-table
                :data="tableData"
                border
                v-loading="loading"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="70" sortable align="center"></el-table-column>
                <el-table-column prop="mobile" label="使用人手机"></el-table-column>
                <el-table-column prop="red" label="红包"></el-table-column>
                <el-table-column prop="flag" label="类型"></el-table-column>
                <el-table-column prop="type" label="状态"></el-table-column>
                <el-table-column prop="created_at" sortable label="添加时间"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
   name: 'user_red_log',
  data () {
    return {
      query: {
        mobile: '',
        page: 1,
        pageSize: 10
      },
      loading: false,
      tableData: [],
      windowsPopVisible: false,
      windowsPopUrl: '',
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      pageTotal: 0,
      edit: {},
      add: {
        img: '',
        name: '',
        status: '1',
        sort: 10,
        url: '',
        img_url: [],
        desc:''
      },
      idx: -1,
      id: -1,
      getList: function () {
        let that = this;
        this.api.get('getUserRedLog', this.query, res => {
          let data = res.data;
          that.tableData = data.list;
          that.pageTotal = data.pageTotal;
        }, undefined, undefined, this);
      },
    };
  },
  created () {
    this.getList();
  },
  methods: {
    // 分页导航
   handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getList();
    },
  // 触发搜索按钮
   handleSearch () {
      this.$set(this.query, 'page', 1);
      this.getList();
  },
  // 多选操作
   handleSelectionChange (val) {
      this.multipleSelection = val;
  },
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.mr10 {
    margin-right: 10px;
}
.previews > img {
    max-width: 90%;
    max-height: 90%;
}
</style>
